<script setup>
import KOfooter from '@/components/KOfooter/KOfooter.vue';
import KOheader from "../../components/KOheader/KOheader.vue";
import { Search } from '@element-plus/icons-vue'
// import {WalletFilled,Back} from "@element-plus/icons-vue";
import { ref, onMounted,watch } from "vue";
onMounted(() => {
  for (let i = 0; i < 6; i++) {
    tableData.value.push(
      {
        Rune: new URL('@/image/组 26.png', import.meta.url).href,
        DeployTime: '2023/12/01 13:29:06',
        Supply: '600.000.000',
        Progress: 100,
        Holders: 102212
      }
    )
  }
})
const innerWidth = ref(false)
onMounted(() => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
})
const handleResize = () => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
};
watch(() => window.innerWidth, handleResize);
const input1 = ref('')
const show = ref(true)
const gender=ref("") 
const dlog=ref(true)
const sent =ref(false)
const tableData = ref([
  {
    Rune: new URL('@/image/组 26.png', import.meta.url).href,
    DeployTime: '2023/12/01 13:29:06',
    Supply: '600.000.000',
    Progress: 100,
    Holders: 102212
  },
])
// const formLabelAlign = reactive({
//   name: '',
//   region: '',
//   type: '',
// })
// 表格点击跳转详情
const Jump = () => {
  console.log('jinru'); flag.value = false
}
// 返回
const flag = ref(true)
const BackView = () => {
  flag.value = true
}
// 跳转
const to=()=>{
  show.value=false
}
const handleSubmit=()=>{
  dlog.value=false
  sent.value=true
}
const close=()=>{
  sent.value=false
}
const username = ref('')
const password = ref('')
const back=()=>{
  flag.value=true
}
</script>

<template>
  <div class="HOME">
    <KOheader></KOheader>
    <div v-if="dlog">
      <div v-if="show">
      <div class="Home-son" v-if="flag">
      THE UNIVERSAL #RUNE EXPLORER
      <div class="home-input">
        <el-input v-model="input1" class="w-50 m-2" size="large" placeholder="Search by Address / Rune / Transaction"
          :suffix-icon="Search" />
      </div>
      <div class="home-table">
        <el-card class="box-card" style="width: 120%; margin-left: -10%; height: 63vh;">
          <template #header>
            <div class="card-header">
              <span class="span1">THE FULL LIST OF RUNES</span>
              <br>
              <span class="span2"> Indexer progress: 2023/12/30 01:28:06</span>
            </div>
          </template>
          <div class="text item">
            <el-table :data="tableData" class="homedatatabel">
              <el-table-column prop="Rune" label="Rune" show-overflow-tooltip width="150">
                <template #default="scope">
                  <img :src="scope.row.Rune" alt="Rune Image" width="50" height="20" @click="Jump">&nbsp;
                  <img src="../../image/组 26(1).png" alt="Rune Image" width="18" height="18" @click="Jump">
                </template>
              </el-table-column>
              <el-table-column prop="DeployTime" label="DeployTime" show-overflow-tooltip>
                <template #default="scope">
                  <span @click="Jump">{{ scope.row.DeployTime }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="Supply" label="Supply" show-overflow-tooltip>
                <template #default="scope">
                  <span @click="Jump">{{ scope.row.Supply }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="Progress" label="Progress" width="180" show-overflow-tooltip>
                <template #default="scope">
                  <el-progress :percentage="scope.row.Progress" @click="Jump" />
                </template>
              </el-table-column>
              <el-table-column prop="Holders" label="Holders" show-overflow-tooltip>
                <template #default="scope">
                  <span @click="Jump">{{ scope.row.Holders }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
    </div>
    <div class="Home-son2" v-else>
      <div class="nav">
        <img style="width: 17px; height: 11px;" src="../../assets/fan/返回@2x.png" alt="" @click="back">
        <img src="../../assets/fan/组 26@2x.png" alt=" " width=" 18" height="18" style="margin-left: 5px;">
        <span>&nbsp;&nbsp;KOI&nbsp;&nbsp;</span>
        <img src=" ../../image/组 26(1).png" alt="Rune Image" width="18" height="18" @click="Jump">
        <el-button round @click="to">MINT</el-button>
      </div>
      <div class="progress">
        <el-progress :percentage="100" />
      </div>
      <el-card class="box-card">
        <el-row>
          <el-col :span="4">
            <!-- <div class="grid-content ep-bg-purple-dark"> -->
              <h4>Address</h4>
              <!-- <span>
                0X5DE8190F8AA33D687A48FF78703ADAD4639BF480
              </span> -->
            <!-- </div> -->
          </el-col>
          <el-col :span="8">
            <span>
                0X5DE8190F8AA33D687A48FF78703ADAD4639BF480
              </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" :xs="4">
            <h4>RUNE</h4>
          </el-col>
          <el-col :span="8" :xs="8">
            <span>
                KOI
            </span>
          </el-col>
          <el-col :span="4" :xs="4">
            <h4>1</h4>
          </el-col>
          <el-col :span="8" :xs="8">
            <span>
                KOI
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" :xs="5">
            <h4>SUPPLY</h4>
          </el-col>
          <el-col :span="8" :xs="7">
            <span>
                600,000,000
              </span>
          </el-col>
          <el-col :span="4" :xs="10">
            <h4>LIMIT PER MINT</h4>
          </el-col>
          <el-col :span="8" :xs="2">
            <span>
                6000
              </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" :xs="6">
            <h4>HOLDERS</h4>
          </el-col>
          <el-col :span="8" :xs="6">
            <span>
                40,000
              </span>
          </el-col>
          <el-col :span="4" :xs="2">
            <h4>Timestamp</h4>
          </el-col>
          <el-col :span="8" :xs="10">
            <span>
                2023/12/01 13:29:26
              </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" :xs="8">
            <h4>MY BALANCE</h4>
          </el-col>
          <el-col :span="8" :xs="4">
            <span>
                600,000
              </span>
          </el-col>
          <el-col :span="4" :xs="6">
            <h4>FEE PER MINT</h4>
          </el-col>
          <el-col :span="8" :xs="6">
            <span>
                0.0006 BNB
              </span>
          </el-col>
        </el-row>
      </el-card>
    </div>
    </div>
      <div style="width: 22.25rem;height: 20rem;border: 1px solid #332951;position: relative; left: 50%;top: 20%; margin-top: 100px; transform: translate(-50%);padding: 5px;" v-else>
      <div style="color: #fff;font-size: 20px;font-weight: 600;">
        Mint
      </div>
      <form style="width: 300px; margin: 20px auto;">
        <div style="margin-bottom: 10px;">
          <label for="username" style="display: inline-block; width: 80px; text-align: right;color: white;margin-right: 10px;">Tick</label>
          <input type="text" id="username" v-model="username" required style="width: 200px;height: 40px;background-color: transparent; border: 1px solid rgb(107, 104, 104);">
        </div>
        <div style="margin-bottom: 10px;">
          <label for="password" style="display: inline-block; width: 80px; text-align: right; color: white;margin-right: 10px;">Amount</label>
          <input type="password" id="password" v-model="password" required style="width: 200px;height: 40px;background-color: transparent; border: 1px solid rgb(107, 104, 104);">
        </div>
        <div style="margin-bottom: 10px;">
          <label style="display: inline-block; width: 80px; text-align: right; margin-right: 10px;white-space: nowrap;color: #fff;">Repeat Mint</label>
             <label for="option1" 
              class="option" 
              v-bind:class="{ 'selected': gender === '1' }" 
              v-on:click="gender = '1'">
              1
            </label>
            <input type="radio" id="option1" name="option" value="1" v-model="gender" style="display: none;">
            
            <label for="option5" 
              class="option" 
              v-bind:class="{ 'selected': gender === '5' }" 
              v-on:click="gender = '5'">
              5
            </label>
            <input type="radio" id="option5" name="option" value="5" v-model="gender" style="display: none;">
            
            <label for="option10" 
              class="option" 
              v-bind:class="{ 'selected': gender === '10' }" 
              v-on:click="gender = '10'">
              10
            </label>
            <input type="radio" id="option10" name="option" value="10" v-model="gender" style="display: none;">
            
            <label for="option50" 
              class="option" 
              v-bind:class="{ 'selected': gender === '50' }" 
              v-on:click="gender = '50'">
              50
            </label>
            <input type="radio" id="option50" name="option" value="50" v-model="gender" style="display: none;">
        </div>
        <div>
          <button @click="handleSubmit" type="submit" style="border: 1px solid; background-image: linear-gradient(to right, #cf66b8, #4c51e8);width: 294px; height: 50px; border-radius: 33px;margin-top: 20px;">Connect Wallet</button>
        </div>
      </form>
      </div>
    </div>
    <div v-else>
      <div style="position: absolute; left: 50%; top: 25%; transform: translate(-50%);">
      <img style="width: 250px;height: 250px;" src="../../assets/色相／饱和度 2@2x.png" alt="">
      <div style="text-align: center;margin-left: 10px; color: white;font-size: 25px; font-weight: 600; margin-top:20px ;">COMING SOON</div>
      <!-- 弹出框 -->
        <div style="width: 20rem;height: 300px; border-radius: 20px;background-color: #fff;position: absolute; left: 50%;top: 20%;transform: translate(-50%);" v-if="sent">
          <img style="width: 30px; height: 30px;position: absolute; right:10px ; top: 10px;" @click="close" src="../../assets//zu/关闭@2x.png" alt="">
          <img style="width: 100px;height: 100px;position: relative; left: 50%; top: 10%;transform: translate(-50%);" src="../../assets//zu/组 26@2x.png" alt="">
            <div style="margin-top: 40px;display: flex; flex-direction: column; align-items: center; justify-content: center;">
              <div style="color:  #000;">Transaction sent</div>
              <div style="color:  rgb(174, 170, 170);">Your transaction will be processed</div>
              <div style="color:  rgb(174, 170, 170);">in a few seconds.</div>
              <button style="border: none; margin-top: 20px; color: #cd64e1;background-color: #faedfe; width: 100px;height: 40px; border-radius: 30px;" @click="close">close</button>
            </div>
        </div>
    </div>
    </div>
  </div>
  <KOfooter/>
</template>

<style scoped lang="scss">
.selected {
  background-color: #5347ed;
  color: #fff;
  border: 1px solid #5347ed;
}
.option {
  display: inline-block;
  width: 46px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  margin-right: 5px;
  color: #fff;
  border: 1px solid #000;
  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
}
.Home-son2 {
  & .box-card {
    width: 90%;
    height: calc(100vh - 46vh);
    margin: 0 auto;
    border: 0.5px solid rgb(208, 208, 208);
    border-radius: 20px;
    background-color: rgb(23, 12, 54);
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    & .el-row {
      height: 3rem;
      & h4{
        color: rgb(99, 99, 99);
      }
      & span{
        color: rgb(255, 255, 255);
        font-weight: normal;
      }
    }
  }

  & .progress {
    width: 70%;
    margin: 20px auto;

  }

  & .nav {
    width: 70%;
    margin: 0 auto;
    margin-top: 10px;
    height: 60px;
    line-height: 60px;
    position: relative;

    & .el-icon {
      font-weight: 700;
      vertical-align: middle;
    }

    & img {
      vertical-align: middle;
    }

    & span {
      color: white;
    }

    & .el-button {
      color: white;
      background-color: rgb(52, 29, 92);
      border: 0;
      font-weight: normal;
      position: absolute;
      right: 0;
      bottom: 1rem;
    }
  }
}

::v-deep .el-progress__text {
  color: rgb(255, 255, 255);
}

::v-deep .el-progress-bar__inner {
  background: linear-gradient(to right, rgb(198, 66, 189), rgb(120, 150, 255));
}

.homedatatabel {
  width: 100%;
  // height: calc(38vh);
  overflow-y: auto;
}

.HOME {
  /* background-color: #3d3d3d; */
  /* background: linear-gradient(to right, rgb(146, 119, 160),rgb(89, 101, 144)); */
  /* background-image: url('../../image/首页.png');
  background-size: cover;
  background-repeat: no-repeat; */
  background: linear-gradient( to right, #160d35, #2f0a49);
  /* background-image: url('../../image/图层 8.png'); */
  width: 100%;
  height: calc(100vh);

  & .Home-son {
    padding-top: 1.5rem;
    color: white;
    text-align: center;
    font-size: large;
    font-weight: 700;
  }

  & .home-input {
    width: 80%;
    margin: 0 auto;
    margin-top: 1.25rem;
    border-radius: 50%;
  }
}

::v-deep el-table__body-wrapper {
  border: 0;
}

::v-deep .el-input__wrapper {
  background-color: rgb(46, 39, 76);
  border-radius: 1.25rem;
}
::v-deep .el-input__inner::placeholder {
  color: rgb(186, 186, 186);
  font-size: 14px;
  font-family: '楷体';
  font-weight: 700;
}

.home-table {
  width: 70%;
  margin: 0 auto;
  margin-top: .625rem;

  & .el-card {
    height: calc(100vh - 46vh);
    overflow: hidden;
    background-color: rgb(46, 39, 76);
    border: 0;
    color: aliceblue;
    border-radius: 10px;
  }
}

.card-header {
  text-align: center;

  & .span1 {
    color: rgb(255, 255, 255);
  }

  & .span2 {
    color: rgb(192, 192, 192);
    font-size: 14px;
    font-family: '楷体';
  }
}

::v-deep .el-card__header {
  border-bottom: 0;
}

::v-deep .el-table::before {
  height: 0;
}

::v-deep .el-table th.is-leaf {
  border: none;
}

::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: rgb(46, 39, 76);
  border: 0px;
}

::v-deep .el-table tbody tr:hover>td {
  background: rgb(28, 16, 63) !important;

}

::v-deep .el-table tbody tr {
  border-radius: 50% !important;
}
</style>